/**
 *  提示弹出框
 * @param {string} message 提示信息
 * 
 */

import { FC, useRef } from "react";
import { PitModalBox } from "./style";
import ButtonX from "../ButtonX";

const PitModal: FC<{
    message: string;
    open: boolean,
    onClose?: (type: 'ok' | 'cancel') => void,
    type: 'delete'
}> = ({
    message,
    open,
    onClose,
    type
}) => {
        const ModulePitBoxRef = useRef<HTMLDivElement>(null); // 弹窗的ref 外层
        const moduleBoxContentRef = useRef<HTMLDivElement>(null); // 弹窗的ref 内层
        // 点击确定按钮
        const handleSumber = () => {
            if (type === 'delete') {
                onClose && onClose('ok')
            }
        }
        return <PitModalBox ref={ModulePitBoxRef} open={open} >
            <div ref={moduleBoxContentRef} className="modal-content" >
                <div className="modal-header">
                    <div className="modal-title">添加</div>
                    <span className="guanbi" aria-hidden="true" onClick={() => {
                        onClose && onClose('cancel')
                    }}>&times;</span>
                </div>
                <div className="modal-body">
                    {message}
                </div>
                <div className="modal-footer">
                    <div style={{ marginRight: '2rem' }}>
                        <ButtonX type="info" onClick={() => {
                            onClose && onClose('cancel');
                        }}>取消</ButtonX>
                    </div>
                    <ButtonX type='primary' onClick={() => handleSumber()}>确定</ButtonX>
                </div>
            </div>
        </PitModalBox>
    }

export default PitModal;